<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.dbColumn.selectTableColumnTitle')"
    align-center
    width="80%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-row>
      <el-col :span="12">
        <wsm-table
          ref="table"
          v-model="queryFormType"
          :change-load="true"
          @row-click="rowClick"
          load-url="/dbms-server/base/app/page"
        >
          <template #title>{{ t('dbms.microservices.title') }}</template>
          <template #query="{ data }">
            <el-form-item :label="t('dbms.microservices.title')">
              <el-input v-model="data.appName.value" />
            </el-form-item>
          </template>
          <template #column>
            <el-table-column prop="appName" :label="t('dbms.microservices.appName')" width="180" />
            <el-table-column prop="appNote" :label="t('dbms.microservices.appNote')" />
          </template>
        </wsm-table>
      </el-col>

      <el-col :span="12">
        <wsm-table
          ref="serviceTable"
          v-model="queryServiceFormType"
          :change-load="true"
          :frist-load="false"
          load-url="/dbms-server/base/servicedesign/page"
        >
          <template #title>{{ t('dbms.design.serviceDesign.tableTitle') }}</template>
          <template #query="{ data }">
            <el-form-item :label="t('dbms.serviceEdit.serviceCodeName')">
              <el-input v-model="data.code.value" />
            </el-form-item>
            <el-form-item :label="t('dbms.serviceEdit.serviceName')">
              <el-input v-model="data.name.value" />
            </el-form-item>
          </template>
          <template #button="{ row }">
            <el-button v-if="row" @click="select(row.code)" type="primary">{{
              t('dbms.dbColumn.selectBtn')
            }}</el-button>
          </template>
          <template #column>
            <el-table-column
              prop="activity"
              :label="t('dbms.design.serviceDesign.activity')"
              width="70"
            >
              <template #default="scope">
                <template v-if="scope.row.activity == 1">
                  <el-tag type="success">{{ t('dbms.design.serviceDesign.enable') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger">{{ t('dbms.design.serviceDesign.disable') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="code" :label="t('dbms.design.serviceDesign.code')" width="180" />
            <el-table-column prop="name" :label="t('dbms.design.serviceDesign.name')" width="250" />
            <el-table-column prop="note" :label="t('dbms.design.serviceDesign.note')" />
          </template>
        </wsm-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { WsmTable } from '@/components/WsmTable'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'

const { t } = useI18n()
const centerDialogVisible = ref(false)

const table = ref()

const queryFormType: QueryFormType = {
  appName: {
    value: '',
    queryType: QueryType.LIKE
  }
}

const rowClick = (row) => {
  queryServiceFormType.appName.value = row.appName
  serviceTable.value.load(1)
}

const serviceTable = ref()

const queryServiceFormType: QueryFormType = {
  appName: {
    value: '',
    clear: false,
    queryType: QueryType.EQ
  },
  name: {
    value: '',
    queryType: QueryType.LIKE
  },
  code: {
    value: '',
    queryType: QueryType.LIKE
  }
}

let callback: Function = () => {}

const select = (code: string) => {
  callback(table.value.getRow().appName, code)
  hide()
}

const show = (cb: Function) => {
  callback = cb
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}
//暴露方法
defineExpose({ show, hide })
</script>
